<template>
	<el-dialog v-model="model" title="修改手機" width="450px" destroy-on-close>
		<el-carousel
			ref="carousel"
			:autoplay="false"
			arrow="never"
			indicator-position="none"
			:initial-index="0"
			height="140px"
		>
			<el-carousel-item name="oldEmail">
				<el-form ref="oldEmailForm" :model="oldEmailFormData" :rules="rules">
					<el-form-item prop="email">
						<el-input
							v-model.trim="oldEmailFormData.email"
							placeholder="請輸入當前修改手機"
						/>
					</el-form-item>
					<el-form-item>
						<div style="display: flex; width: 100%">
							<el-input
								style="flex: 1"
								v-model.trim="oldEmailFormData.code"
								placeholder="請輸入驗證碼"
							/>
							<el-button
								:disabled="!oldEmailFormData.email || timerCount > 0"
								:loading="sending"
								style="padding: 0 12px"
								type="text"
								@click="sendEmailCode(oldEmailFormData.email)"
								>{{ codeSendLabel }}</el-button
							>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button style="margin-left: auto" @click="handleCancel">取消</el-button>
						<el-button
							:loading="submitting"
							:disabled="!oldEmailFormData.email || !oldEmailFormData.code"
							type="primary"
							@click="handleNextStep"
							>下一步</el-button
						>
					</el-form-item>
				</el-form>
			</el-carousel-item>

			<el-carousel-item name="nowEmail">
				<el-form ref="nowEmailForm" :model="nowEmailFormData">
					<el-form-item prop="email">
						<el-input
							v-model.trim="nowEmailFormData.email"
							placeholder="請輸入新修改手機"
							@change="errorMsg = null"
						/>
					</el-form-item>
					<el-form-item prop="code">
						<div style="display: flex; width: 100%">
							<el-input
								style="flex: 1"
								v-model.trim="nowEmailFormData.code"
								placeholder="請輸入驗證碼"
								@change="errorMsg = null"
							/>
							<el-button
								style="padding: 0 12px"
								type="text"
								:disabled="timerCount > 0"
								@click="sendEmailCode(nowEmailFormData.email)"
								>{{ codeSendLabel }}</el-button
							>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button style="margin-left: auto" @click="carousel.prev()"
							>上一步</el-button
						>
						<el-button
							:loading="submitting"
							:disabled="!nowEmailFormData.email || !nowEmailFormData.code"
							type="primary"
							@click="handleSave"
							>保存</el-button
						>
					</el-form-item>
				</el-form>
			</el-carousel-item>
			<el-carousel-item name="result">
				<p>您的新修改手機修改成功</p>
				<p>{{ nowEmailFormData.email }}</p>
				<el-button style="margin: 0 auto" type="primary" @click="model = false"
					>关闭</el-button
				>
			</el-carousel-item>
		</el-carousel>
	</el-dialog>
</template>
<script setup>
import { CheckEmailCode, GetCodeOfEmail } from '~/apis/web';
import { userStore } from '~/composables/store/modules/user';

const model = defineModel({ type: Boolean });
const store = userStore();
const carousel = ref(null);
const oldEmailForm = ref(null);
const oldEmailFormData = reactive({
	email: null,
	code: null,
});

const nowEmailForm = ref(null);
const nowEmailFormData = reactive({
	email: null,
	code: null,
});

const rules = reactive({
	email: [
		{ required: true, message: '请输入修改手機' },
		{ type: 'email', message: '請輸入正確的修改手機', trigger: 'blur' },
	],
	code: [{ required: true, message: '请输入驗證碼' }],
});
const submitting = ref(false);

function handleCancel() {
	model.value = false;
}
// GetCodeOfEmail
// CheckEmailCode

const sending = ref(false);
const timer = ref(null);
const timerCount = ref(null);
const codeSendLabel = computed(() =>
	timerCount.value == null
		? '發送驗證碼到郵箱'
		: timerCount.value > 0
		? `${timerCount.value}s`
		: '重新發送'
);
async function sendEmailCode(email) {
	try {
		sending.value = true;
		const body = {
			scene: 23,
			email,
		};
		const { code, data } = await GetCodeOfEmail(body);
		if (code === 0 && data) {
			startTimer();
		}
	} finally {
		sending.value = false;
	}
}

function startTimer() {
	stopTimer();
	timerCount.value = 60;
	timer.value = setInterval(() => {
		timerCount.value--;
		if (timer.value == 0) {
			stopTimer();
		}
	}, 1000);
}

function stopTimer() {
	if (!timer.value) return;
	clearInterval(timer.value);
	timer.value = null;
}

async function handleNextStep() {
	if (!carousel.value) return;
	const body = {
		scene: 23,
		...oldEmailFormData,
	};
	submitting.value = true;
	try {
		const { code, data } = await CheckEmailCode(body);
		if (code === 0 && data) {
			carousel.value.next();
		}
	} finally {
		submitting.value = false;
	}
}

async function handleSave() {
	if (!carousel.value) return;
	const body = {
		scene: 23,
		...nowEmailFormData,
	};
	submitting.value = true;
	try {
		const { code, data } = await CheckEmailCode(body);
		if (code === 0 && data) {
			await store.updateUserInfoAction({
				email: nowEmailFormData.email,
			});
			carousel.value.next();
		}
	} finally {
		submitting.value = false;
	}
}

watch(
	() => model.value,
	now => {
		if (!now) {
			stopTimer();
		}
	}
);
</script>
